<template>
  <div class="layout">
    <van-nav-bar title="商机池" left-text left-arrow fixed safe-area-inset-top>
      <template #right>
        <van-icon name="search" size="18" @click="search" />
      </template>
    </van-nav-bar>
    <div class="layout-content">
      <!-- tab栏 -->
      <div class="tab-container">
        <bob-tab
          :tabs="tabs"
          @getActionTab="getActionTab"
          @getActiveButton="getActiveButton"
        ></bob-tab>
      </div>
      <!-- list列表 -->
      <div class="listOne">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
            <div v-for="item in list" :key="item">
              <business-card @click="detailBtn"></business-card>
            </div>
            <business-card></business-card>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import businessCard from "./components/businessCard.vue";
const router = useRouter();
// 搜索路由跳转
const search = () => {
  router.push("/businessPool/search");
};
const detailBtn = (event) => {
  router.push("/businessPool/details");
};

const tabs = ref([
  {
    title: "全部",
    content: [
      { code: 31, action: "服务" },
      { code: 311, action: "服务1" },
    ],
    code: 112,
  },
  {
    title: "产品",
    content: [
      { code: 32, action: "服务1" },
      { code: 322, action: "服务w" },
    ],
    code: 322,
  },
  {
    title: "融资",
    content: [
      { code: 33, action: "服务q" },
      { code: 333, action: "服务4" },
    ],
    code: 123,
  },
  {
    title: "并购",
    content: [
      { code: 34, action: "服务q" },
      { code: 344, action: "服务4" },
    ],
    code: 114,
  },
]);
//  子组件传递的数据
const getActionTab = (value) => {
  console.log(value);
};
const getActiveButton = (value) => {
  console.log(value);
};

const list = ref([]);
const loading = ref(false); // 上滑加载
const finished = ref(false); //加载已完成
const refreshing = ref(false); //下拉刷新

// 上滑加载
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }
    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

// 下拉刷新
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
</script>

<style lang="scss" scoped>
.layout {
  height: calc(100vh - 50px);
  background-color: #f2f3f5;
  &-content {
    height: 100%;
    overflow-y: auto;
    padding-top: 44px;
    /* padding-bottom: 44px; */
    box-sizing: border-box;
    /* height: calc(100% - 44px); */
    background-color: #f2f3f5;

    .listOne {
      margin-top: 100px;
      padding: 15px;
    }
  }
}
</style>

